<template>
  <div id="app-container">
    <!--条件查询表单-->
    <el-form :inline="true" class="demo-form-inline">
      <el-form-item label="">
        <el-input v-model="operatorDTO.name" placeholder="运维人员名称"></el-input>
      </el-form-item>
      <el-form-item label="">
        <el-input v-model="operatorDTO.phone" placeholder="手机号码"></el-input>
      </el-form-item>
      <el-form-item label="">
        <el-select v-model="operatorDTO.status" placeholder="状态">
          <el-option label="正常" value="0"></el-option>
          <el-option label="禁用中" value="1"></el-option>
        </el-select>
      </el-form-item>
      <el-button type="primary" icon="el-icon-search" @click="getList()">查询</el-button>
      <el-button type="default" @click="resetData()">重置</el-button>
    </el-form>

    <div>
      <el-button type="primary" @click="add">新建</el-button>
    </div>

    <!--数据显示列表-->
    <el-table :data = "dataList" fit highlight-current-row>
      <el-table-column type="index" label="序号" width="70">
        <template slot-scope="scope">
          <span>{{ (currentPage - 1) * pageSize + scope.$index + 1 }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="name" label="运维人员名称" width="200"/>
      <el-table-column prop="phone" label="手机号码" width="200"/>
      <el-table-column prop="operatorGroup" label="所属分组" width="200"/>
      <el-table-column prop="status" label="状态" width="200">
        <template slot-scope="scope">
          <span v-if="scope.row.status == '0'">正常</span>
          <span v-if="scope.row.status == '1'">禁用中</span>
        </template>
      </el-table-column>


      <el-table-column label="操作" width="400">
        <template slot-scope="scope">
          <el-button type="primary" size="mini"  @click="edit(scope.row.id)">编辑</el-button>
          <el-button type="primary" size="mini"  @click="forbidden(scope.row.id)">禁用账户</el-button>
          <el-button type="primary" size="mini"  @click="recover(scope.row.id)">恢复账户</el-button>
          <el-button type="danger" size="mini"  @click="deleteById(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <div class="">
      <el-dialog title="新增或编辑运维人员" :visible.sync="dialogFormVisible">
        <el-form :model="form">
          <el-form-item label="运维人员名称" :label-width="formLabelWidth">
            <el-input v-model="form.name" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="手机号码" :label-width="formLabelWidth">
            <el-input v-model="form.phone" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="登录密码" :label-width="formLabelWidth">
            <el-input v-model="form.password" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="状态" :label-width="formLabelWidth">
            <el-select v-model="form.status" placeholder="请选择账户状态">
              <el-option label="正常" value="0"></el-option>
              <el-option label="禁用中" value="1"></el-option>
            </el-select>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="save()">保存</el-button>
        </div>
      </el-dialog>
    </div>

    <!--禁用账户对话框-->
    <div>
      <el-dialog
        title="代理商禁用"
        :visible.sync="dialogForbidden"
        width="30%"
        :before-close="handleClose">
        <span>确定要禁用选定用户？</span>
        <span slot="footer" class="dialog-footer">
        <el-button @click="dialogForbidden = false">取 消</el-button>
        <el-button type="primary" @click="handledForbidden">确 定</el-button>
        </span>
      </el-dialog>
    </div>

    <!--恢复账户对话框-->
    <div>
      <el-dialog
        title="代理商恢复"
        :visible.sync="dialogRecover"
        width="30%"
        :before-close="handleClose">
        <span>确定要恢复选定用户？</span>
        <span slot="footer" class="dialog-footer">
        <el-button @click="dialogRecover = false">取 消</el-button>
        <el-button type="primary" @click="handledRecover">确 定</el-button>
        </span>
      </el-dialog>
    </div>

    <!--删除账户对话框-->
    <div>
      <el-dialog
        title="删除"
        :visible.sync="dialogDelete"
        width="30%"
        :before-close="handleClose">
        <span>确定要删除选定用户？</span>
        <span slot="footer" class="dialog-footer">
        <el-button @click="dialogDelete = false">取 消</el-button>
        <el-button type="primary" @click="handledDelete">确 定</el-button>
        </span>
      </el-dialog>
    </div>

    <el-pagination
      :current-page="currentPage"
      :page-size="pageSize"
      :total="total"
      :page-sizes="[1, 2, 3, 4,5]"
      layout="total, sizes, prev, pager, next, jumper"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"/>
  </div>
</template>
<script>
import operator from '@/api/operator'
export default {
  data() {
    return {
      dataList: [],
      listLoading: true, // 加载数据
      operatorDTO: {}, // 查询条件对象
      currentPage: 1, // 当前页
      pageSize: 10, // 每页记录数
      total: null,
      imageUrl: null,
      drawer: false,  //抽屉
      direction: 'rtl',  //抽屉打开的方向
      dialogFormVisible:false,
      form: {
        id: '',
        name: '',
        phone: '',
        password: '',
        status: '',
      },
      formLabelWidth: '120px',
      visible: false,
      centerDialogVisible: false,
      dialogForbidden: false,
      dialogDelete: false,
      dialogRecover: false

    }
  },
  created() {
    this.getList()
  },
  methods: {
    // 每页记录数发生变化
    handleSizeChange(size) {
      this.pageSize = size
      this.getList()
    },
    // 当前页发生变化
    handleCurrentChange(current) {
      this.currentPage = current
      this.getList()
    },
    // 清空搜索框内容
    resetData() {
      this.operatorDTO = {}
      this.getList()
    },
    // 页面初始化数据查询, 根据分页参数及搜索条件
    getList() {
      operator.getList(this.currentPage, this.pageSize, this.operatorDTO).then(res => {
        this.dataList = res.data.data
        this.total = res.data.total
      })
    },
    edit(id) {
      this.dialogFormVisible = true;
      operator.getById(id).then(res => {
        this.form = res.data
      })
    },
    save() {
      // 判断是否是修改操作
      if (this.dataList.id != null || this.dataList.id != undefined) {
        operator.edit(this.form).then(res=>{
          if (res.code == 200) {
            this.$message.success(res.message)
            this.dialogFormVisible = false
          }
        })
      }else {
        operator.save(this.form).then(res => {
          if (res.code == 200) {
            this.$message.success(res.message)
            this.dialogFormVisible = false
          }
        })
      }
    },
    add() {
      this.form = {
        id: '',
        name: '',
        phone: '',
        password: '',
        status: '',
      }
      this.dialogFormVisible = true
    },
    handle() {
      this.centerDialogVisible = true
    },
    forbidden(id) {
      operator.getById(id).then(res=>{
        if (res.data.status==0) {
          this.dialogForbidden = true
          this.form.id = id
        }else {
          this.$message.warning("已处于禁用状态")
        }
      })


    },
    handledForbidden() {
      operator.forbidden(this.form.id).then(res=>{
        if (res.code == 200) {
          this.$message.success(res.message)
          this.dialogForbidden = false
          this.getList()
        }
      })
    },
    recover(id) {
      operator.getById(id).then(res=>{
        if (res.data.status == 1) {
          this.dialogRecover = true
          this.form.id = id
        }else {
          this.$message.info("账号处于正常状态")
        }
      })

    },
    handledRecover() {
      operator.recover(this.form.id).then(res=>{
        if (res.code == 200) {
          this.$message.success(res.message)
          this.dialogRecover = false
          this.getList()
        }
      })
    },
    deleteById(id) {
      this.dialogDelete = true
      this.form.id = id
    },
    handledDelete() {
      operator.delete(this.form.id).then(res=>{
        if (res.code == 200) {
          this.$message.success(res.message)
          this.dialogDelete = false
          this.getList()
        }
      })
    }
  }
}
</script>
